<template>
    <li>
        <label>
            <input type="checkbox" v-model="isChecked">
            <span>{{todo.title}}</span>
        </label>
        <button class="btn btn-danger btnShow" @click="deleClick">删除</button>
    </li>
</template>

<script lang="ts">
import { computed, defineComponent, inject, onMounted, reactive, toRefs } from "vue";
import {Todo} from '../types/todo'
export default defineComponent({
  name: "iTem",
  props: {
    todo: Object as ()=>Todo , //函数返回的是Todo类型
    index:{
        type:Number
    },
    isComplete:Boolean,
  },
 setup(props){
    const state = reactive({
        isShow:false,
    })
    // inject接受函数方法
    const  deleteData= inject('deleteData',Function,true)
     const updateData= inject('updateData',Function,true)     
     const deleClick = ()=>{
        if(window.confirm('确定要删除吗?')){
            deleteData(props.index)
        }
    }
    onMounted(()=>{
        console.log(props.todo);
        
    })
    // 计算属性设置或者读取让复选框选中/不选中
    const isChecked = computed({
      
        get(){
            return props.todo.isChecked
        },
        set(val){
            // 对象中的isComlete操作
            // console.log(props.todo,val);
            
            updateData(props.todo,val);
            
        }
    })
    return{
        ...toRefs(state),
        deleClick,
        isChecked
    }
 }
});
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
li{
    list-style: none;
    height: 40px;
    line-height: 40px;
    padding: 0 5px;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #ddd;
    padding-right: 20px;
    &:hover{
        background: pink;
        .btnShow{
            display: block;
        }
    }
    .btn{
        display: none;
    }
}
</style>
